<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" >
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html,body{
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
        }
        body{
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .main{
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        .share_title{
            font-size: 40px;
            margin-bottom: 30px;
        }
        .panel{
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .btn{
            width: 200px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: cadetblue;
            color: white;
            font-weight: bolder;
            border-radius: 15px;
            cursor: pointer;
        }
        .ipt{
            display: flex;
            width: 200px;
            height: 40px;
            border-radius: 15px;
            border: 2px solid lightgray;
            box-sizing: border-box;
            padding: 10px;
            text-align: center;
        }
        .ipt:focus{
            outline: none;
            border: 2px solid cadetblue;
        }
        .file_info{
            display: flex;
            flex-direction: column;
        }
    </style>
</head>
<body>
<div class="main">
    <img src="/img/file_icon.svg"/>
    <span class="share_title" th:text="${'来自用户：'+shareInfo.getUsername()+' 分享的文件'}"></span>
    <div id="password_panel" class="panel">
        <input type="password" class="ipt" style="margin-bottom: 20px" id="password_input"/>
        <div class="btn" th:onclick="'verify(\'' + ${shareInfo.getFileId()} + '\')'">访问文件</div>
    </div>
    <div id="file_info" class="file_info">
        <span th:text="${shareInfo.getFileName()}"></span>
    </div>
    <div id="save_panel" class="panel">
        <div class="btn" th:onclick="'save(\'' + ${shareInfo.getFileId()} + '\')'">保存文件</div>
    </div>
</div>
<script th:inline="javascript">
    var isLoggedIn = [[${!user.equals('anonymousUser')}]]
</script>
<script>
    function login(){
        window.location.href="login.html";
    }
    function save(fileId){
        if (!isLoggedIn){
            login();
            return;
        }
        fetch("/share/save?fileId="+fileId)
            .then(response=>{
                if (!response.ok){
                    window.location.href="500.html";
                    return null;
                }
                if (response.redirected){
                    window.location.href=response.url;
                    return null;
                }
                return response.json();
            })
            .then(file=>{
                if (file==null){
                    return;
                }
                alert("文件："+file.fileName+" 保存成功");
            })
    }
    function lock(){
        let pass_panel=document.getElementById('password_panel');
        pass_panel.style.display='flex';
        let save_panel=document.getElementById('save_panel');
        save_panel.style.display='none';
        let file_info=document.getElementById('file_info');
        file_info.style.display='none';
    }
    window.onload=()=>{
        lock()
    }
    function unlock(){
        let pass_panel=document.getElementById('password_panel');
        pass_panel.style.display='none';
        let save_panel=document.getElementById('save_panel');
        save_panel.style.display='flex';
        let file_info=document.getElementById('file_info');
        file_info.style.display='flex';
    }
    async function verify(fileId){
        let password=document.getElementById('password_input').value;
        let response=await fetch("/share/verify?password="+password+"&fileId="+fileId);
        if (!response.ok){
            handleError(response);
        }
        let json=await response.json();
        if (!json.success){
            alert("密码错误");
        }else{
            unlock();
        }
    }
</script>
</body>
</html>